<template>
	<view class="content">
		<!-- 第一个过渡页面 -->
		<!-- <view class="transitpage_1" v-if="transitpage_1_status">
			<image src="../static/title_1.png" mode=""></image>
		</view> -->
		
		<!-- 第二个过渡页面 -->
		<!-- <view class="transitpage_2" v-if="transitpage_2_status">
			<image src="../static/logo.png" mode=""></image>
		</view> -->
		
		<!-- 公共 引导页  让我们开始吧！-->
		<view class="pages_1" v-if="startStatus">
			<view class="banner">
				<image src="../static/pagesimg_1.png" mode=""></image>
			</view>
			<view class="title" style="font-weight: 600;">
				<text>照顾自己</text>
				<text>是一段旅程，但我们将与您同行。</text>
			</view>
			<view class="box">
				<text style="font-size: 30rpx;font-weight: 700;">我们是一家帮助您照顾自己的公司。</text>
				<view style="margin-top: 26rpx;">在techbynature，我们信任那些行之有效、用法简单、从内到外都能让人感觉良好的产品。</view>
				<view style="margin-top: 26rpx;">我们的订阅服务能够帮助您更轻易的找到需要的产品。</view>
			</view>
			<view class="text" style="text-align: center;font-weight: 600;">
				<text style="width: 50%;background: #7ecee2;display: block;margin: 0 auto;">准备开始您与</text>
				<view style="width: 38%;background: #bee6f0;display: block;margin: 0 auto;margin-top: 5px;">Tbn</text>的旅程</view>
			</view>
			<view class="btn" @click="sexClick">让我们开始吧！</view>
		</view>
		
		<!-- 公共 性别选择页-->
		<view class="pages_1" v-if="changeSexStatus">
			<image @click="boyBackStart" class="left_icon" src="../static/left.png" mode=""></image>
			<view class="banner">
				<image style="height: 700rpx;" src="../static/pagesimg_2.png" mode=""></image>
			</view>
			<view class="title" style="margin-top: 50rpx;padding: 10rpx 0px;border-top: 2rpx #7dcee2 solid;border-bottom: 2rpx #7dcee2 solid;">
				<text style="font-weight: 700;font-size: 36rpx;letter-spacing: 4rpx;">让我们更加了解您吧！</text>
			</view>
			<view class="sex_box">
				<view class="sex_box_title">您的性别是</view>
				<view class="choose">
					<view class="girl" @click="girlClick(3)">
						<view>
							<image src="../static/girl.png" mode=""></image>
							<view>女孩</view>
						</view>
					</view>
					<view class="boy" @click="boyClick(2)">
						<view>
							<image src="../static/boy.png" mode=""></image>
							<view>男孩</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 选 男 开始 -->
		<view class="choose_boy">
			<!-- 选 男 公共 引导页  我已经准备好了！-->
			<view class="pages_1" v-if="boyReadyStatus">
				<image @click="boyBackSex" class="left_icon" src="../static/left.png" mode=""></image>
				<view class="banner">
					<image src="../static/pagesimg_3.png" mode=""></image>
				</view>
				<view class="text weight" style="width: 77%;font-size: 38rpx;margin: 0 auto;margin-top: 40rpx;line-height: 1.5em;">
					<text style="background: #bedef0;margin: 0 auto;color: #bedef0;font-size: 24rpx;}">让我们一同探索有关照顾自己及仪容相关的一切吧。111111111111111111</text>
					<view style="margin: 0 auto;margin: 0 auto;position: relative;top: -100rpx;left: 10rpx;">让我们一同探索有关照顾自己及仪容相关的一切吧。</view>
				</view>
				<view class="box weight" style="margin-top: -75rpx;margin-top: -74rpx;font-size: 32rpx;">
					<text style="font-weight: 600;border-bottom: 2rpx #000 solid;">tbn </text>
					<text>作为一个全新的照顾自己程序，简单且愉悦</text>
				</view>
				<view style="width: 80%;margin: 0 auto;margin-top: 40rpx;font-size: 26rpx;">
					<text style="font-size: 32rpx;">当您订阅后，您每月将收到一包豪华迷你试用装，全部由我们的海外团队精心挑选，符合您独特的生活方式以及自我护理需求。</text>
					<view style="margin-top: 26rpx;font-size:30rpx;">此外，注册后您可以获取相关专业提示，了解如何使用您将收到的产品。</view>
				</view>
				<view class="btn" @click="boyPlansClick">我已经准备好了！</view>
			</view>
				
			<!-- 选 男 选择您的自我护理计划 -->
			<view class="pages_1" v-if="boyPlanStatus">
				<image @click="boyBackReady" class="left_icon" src="../static/left.png" mode=""></image>
				<view class="banner">
					<image style="height: 540rpx;" src="../static/pagesimg_3.png" mode=""></image>
				</view>
				<view class="title weight" style="margin-top: 50rpx;padding: 10rpx 0px;border-top: 2rpx #7dcee2 solid;border-bottom: 2rpx #7dcee2 solid;">
					<text style="font-size: 36rpx;letter-spacing: 4rpx;">选择您的自我护理计划：</text>
				</view>
				<view class="sex_box" style="padding: 40rpx 0px;">
					<view class="choose_plan" @click="getUserProfile(2,1)">
						<view class="left">
							月计划：
						</view>
						<view class="right">
							<view class="">198元/月</view>
							<view class="">逐月计费</view>
							<view class="">可随时取消</view>
						</view>
					</view>
					<view class="choose_plan" @click="getUserProfile(2,2)">
						<view class="left">
							半年计划：
						</view>
						<view class="right">
							<view class="">988元/6个月</view>
							<view class="">6个月一次性计费</view>
						</view>
					</view>
					<view class="choose_plan" @click="getUserProfile(2,3)">
						<view class="left">
							年计划：
						</view>
						<view class="right">
							<view class="">1688元/年</view>
							<view class="">每年计费</view>
						</view>
					</view>
			
				</view>
			</view>
			
			<!-- 选 男 公共 引导页  您已成功登录！！-->
			<view class="pages_1" v-if="boynickNameStatus">
				<image @click="boyBackPlan" class="left_icon" src="../static/left.png" mode=""></image>
				<view class="banner">
					<image src="../static/pagesimg_3.png" mode=""></image>
				</view>
				<view class="text weight" style="width: 77%;font-size: 32rpx;margin: 0 auto;margin-top: 40rpx;line-height: 1.5em;">
					<text style="background: #bedef0;margin: 0 auto;color: #bedef0;font-size: 18rpx;}">您已成功登录！11111111111111111</text>
					<view style="margin: 0 auto;margin: 0 auto;position: relative;top: -36rpx;left: 20rpx;">您已成功登录！</view>
				</view>
				<view class="box weight" style="font-size:32rpx;margin-top: 0px;">
					<text>照顾自己 </text>
					<text>就是关心自己的一切，有些时候你只需要一点点小惊喜！</text>
				</view>
				<view class="info_box">
					<view class="title">我们该怎么称呼您？</view>
					<view class="info_box_content">
						<image v-if="avatarUrl" :src="avatarUrl" mode=""></image>
						<view class="name_box">
							<view class="name">{{nickName}}</view>
						</view>
					</view>
				</view>
				<view class="btn" @click="boyFindClick">下一步</view>
			</view>
			
			<!-- 选 男 公共 引导页  您今天想要寻找什么？-->
			<view class="pages_1" v-if="boyFindStatus">
				<image @click="boyBackName" class="left_icon" src="../static/left.png" mode=""></image>
				<view class="banner">
					<image src="../static/pagesimg_3.png" mode=""></image>
				</view>
				<view class="text" style="width: 77%;font-size: 40rpx;margin: 0 auto;margin-top: 36rpx;line-height: 1.5em;">
					<text style="background: #bedef0;margin: 0 auto;color: #bedef0;font-size: 18rpx;}">您已成功登录！11111111111111111</text>
					<view class="weight" style="margin: 0 auto;margin: 0 auto;position: relative;top: -48rpx;left: 20rpx;">很高兴见到您，{{nickName}}！</view>
				</view>
				<view class="line"></view>
				<view class="box weight" style="font-size:30rpx;margin-top: 30rpx;">
					<text style="font-weight: 600;">照顾自己 </text>
					<text>就是由内而外的寻找并保持您的最佳状态</text>
				</view>
				<view class="info_box" style="padding-bottom:40rpx;">
					<view class="title">您今天想要寻找什么？</view>
					<view class="info_box_content" style="justify-content: space-around;margin-top: 40rpx;">
						<view class="choose_item" @click="boyPayClick(1)">
							<image style="width: 50rpx;height: 50rpx;border-radius: 0px;" src="../static/star.png" mode=""></image>
							<view style="margin-top: 20rpx;">给我惊喜！</view>
						</view>
						<view class="choose_item" @click="boyPayClick(2)">
							<image style="width: 50rpx;height: 50rpx;border-radius: 0px;" src="../static/heart.png" mode=""></image>
							<view style="margin-top: 20rpx;">由我自己决定！</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 选 男 公共 引导页  选择您的付款方式？-->
			<view class="pages_1" v-if="boyPayStatus">
				<image @click="boyBackFind" class="left_icon" src="../static/left.png" mode=""></image>
				<view class="banner">
					<image style="height: 720rpx;" src="../static/pagesimg_3.png" mode=""></image>
				</view>
				<view class="text" style="width: 77%;font-size: 40rpx;margin: 0 auto;margin-top: 50rpx;line-height: 1.5em;">
					<image style="height: 30rpx;width: 30rpx;vertical-align: -12rpx;" src="../static/star_fill.png" mode=""></image>
					<text style="background: #bedef0;margin: 0 auto;color: #bedef0;font-size: 18rpx;margin-left: 20rpx;">您已成功登录！11111111111111111111111111111</text>
					<view class="weight"  style="font-size: 32rpx;margin: 0 auto;margin: 0 auto;position: relative;top: -48rpx;left: 20rpx;margin-left: 56rpx;">您的惊喜已准备好了！</view>
				</view>
				<view class="line"></view>
				<view class="info_box" style="padding-bottom:50rpx;">
					<view class="title">选择您的付款方式</view>
					<view class="info_box_content" style="justify-content: space-around;margin-top: 40rpx;">
						<view class="choose_item" @click="boyTransitClick">
							<image style="width: 60rpx;height: 60rpx;border-radius: 0px;" src="../static/wx_pay.png" mode=""></image>
							<view style="margin-top: 20rpx;font-size: 26rpx;font-weight: 600;">微信支付</view>
						</view>
						<view class="choose_item" @click="boyTransitClick">
							<image style="width:60rpx;height: 50rpx;border-radius: 0px;" src="../static/card_pay.png" mode=""></image>
							<view style="margin-top: 20rpx;font-size: 26rpx;font-weight: 600;">信用卡</view>
						</view>
					</view>
				</view>
			</view>
				
			<!-- 选 男 公共 引导页  选择您的运输方式？-->
			<view class="pages_1" v-if="boyTransitStatus">
				<image @click="boyBackPay" class="left_icon" src="../static/left.png" mode=""></image>
				<view class="banner">
					<image style="height: 720rpx;" src="../static/pagesimg_3.png" mode=""></image>
				</view>
				<view class="text" style="width: 77%;font-size: 40rpx;margin: 0 auto;margin-top: 50rpx;line-height: 1.5em;">
					<image style="height: 30rpx;width: 30rpx;vertical-align: -12rpx;" src="../static/star_fill.png" mode=""></image>
					<text style="background: #bedef0;margin: 0 auto;color: #bedef0;font-size: 18rpx;margin-left: 20rpx;">您已成功登录！11111111111111111111111111111</text>
					<view class="weight" style="font-size: 32rpx;margin: 0 auto;margin: 0 auto;position: relative;top: -48rpx;left: 20rpx;margin-left: 56rpx;">您已成功付款！</view>
				</view>
				<view class="line"></view>
				<view class="info_box" style="padding-bottom:50rpx;">
					<view class="title">选择您的运输方式</view>
					<view class="info_box_content" style="justify-content: space-around;margin-top: 40rpx;">
						<view class="choose_item" @click="boyEndClick">
							<image style="width: 50rpx;height: 60rpx;border-radius: 0px;" src="../static/location.png" mode=""></image>
							<view style="margin-top: 20rpx;font-size: 26rpx;font-weight: 600;">自提点</view>
						</view>
						<view class="choose_item" @click="boyEndClick">
							<image style="width:50rpx;height: 50rpx;border-radius: 0px;" src="../static/home.png" mode=""></image>
							<view style="margin-top: 20rpx;font-size: 26rpx;font-weight: 600;">送货</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 选 男 公共 引导页  探索更多！-->
			<view class="pages_1" v-if="boyEndStatus">
				<image @click="boyBackTransit" class="left_icon" src="../static/left.png" mode=""></image>
				<view class="banner">
					<image src="../static/pagesimg_3.png" mode=""></image>
				</view>
				<view class="text" style="width: 77%;font-size: 40rpx;margin: 0 auto;margin-top: 50rpx;line-height: 1.5em;">
					<image style="height: 30rpx;width: 30rpx;vertical-align: -12rpx;" src="../static/star_fill.png" mode=""></image>
					<text style="background: #bedef0;margin: 0 auto;color: #bedef0;font-size: 18rpx;margin-left: 20rpx;">您已成功登录！11111111111111111111111111111</text>
					<view class="weight" style="font-size: 32rpx;margin: 0 auto;margin: 0 auto;position: relative;top: -48rpx;left: 20rpx;margin-left: 56rpx;">谢谢您订阅<text style="border-bottom: 2rpx #000 solid;">tbn</text>， <text>{{nickName}}！</text></view>
				</view>
				<view class="box weight" style="font-size: 32rpx;margin-top: 2rpx;">
					<text style="font-weight: 600;border-bottom: 2rpx #000 solid;">tbn </text>
					<text>男孩</text>
					<text>喜欢通过尝试新产品来善待自己，更想不断提升自我</text>
				</view>
				<view style="width: 80%;margin: 0 auto;margin-top: 60rpx;font-size: 28rpx;">
					<text>您可以在个人资料页面查看新的通知。同时我们很高兴您找到了您想要的东西!您能尝试这些有趣的产品也是我们的荣幸。</text>
				</view>
				<view class="btn" style="margin-top: 60rpx;" @click="boyBackClick">探索更多！</view>
			</view>
		</view>
		
		
		<!-- 选 女 开始 -->
		<view class="choose_girl">
			<!-- 选 女 公共 引导页  我已经准备好了！-->
			<view class="pages_1" v-if="girlReadyStatus">
				<image @click="girlBackSex" class="left_icon" src="../static/left.png" mode=""></image>
				<view class="banner">
					<image src="../static/pagesimg_4_girl.png" mode=""></image>
				</view>
				<view class="text weight" style="width: 77%;font-size: 38rpx;margin: 0 auto;margin-top: 40rpx;line-height: 1.5em;">
					<text style="background: #f0cebe;margin: 0 auto;color: #f0cebe;font-size: 24rpx;}">让我们一同探索有关照顾自己及仪容相关的一切吧。111111111111111111</text>
					<view style="margin: 0 auto;margin: 0 auto;position: relative;top: -100rpx;left: 10rpx;">让我们一同探索有关照顾自己及仪容相关的一切吧。</view>
				</view>
				<view class="box weight bdcolor_girl" style="margin-top: -75rpx;margin-top: -74rpx;font-size: 32rpx;">
					<text style="font-weight: 600;border-bottom: 2rpx #000 solid;">tbn </text>
					<text>作为一个全新的照顾自己程序，简单且愉悦</text>
				</view>
				<view style="width: 80%;margin: 0 auto;margin-top: 40rpx;font-size: 26rpx;">
					<text style="font-size: 32rpx;">当您订阅后，您每月将收到一包豪华迷你试用装，全部由我们的海外团队精心挑选，符合您独特的生活方式以及自我护理需求。</text>
					<view style="margin-top: 26rpx;font-size:30rpx;">此外，注册后您可以获取相关专业提示，了解如何使用您将收到的产品。</view>
				</view>
				<view class="btn bdcolor_girl" @click="girlPlansClick">我已经准备好了！</view>
			</view>
				
			<!-- 选 女 选择您的自我护理计划 -->
			<view class="pages_1" v-if="girlPlanStatus">
				<image @click="girlBackReady" class="left_icon" src="../static/left.png" mode=""></image>
				<view class="banner">
					<image style="height: 540rpx;" src="../static/pagesimg_4_girl.png" mode=""></image>
				</view>
				<view class="title weight" style="margin-top: 50rpx;padding: 10rpx 0px;border-top: 2rpx #e29d7e solid;border-bottom: 2rpx #e29d7e solid;">
					<text style="font-size: 36rpx;letter-spacing: 4rpx;">选择您的自我护理计划：</text>
				</view>
				<view class="sex_box bgcolor_girl" style="padding: 40rpx 0px;">
					<view class="choose_plan bdcolor_girl" @click="getUserProfile(3)">
						<view class="left" style="background-color: #f6e2d8;">
							月计划：
						</view>
						<view class="right">
							<view class="">198元/月</view>
							<view class="">逐月计费</view>
							<view class="">可随时取消</view>
						</view>
					</view>
					<view class="choose_plan bdcolor_girl" @click="getUserProfile(3)">
						<view class="left" style="background-color: #f6e2d8;">
							半年计划：
						</view>
						<view class="right">
							<view class="">988元/6个月</view>
							<view class="">6个月一次性计费</view>
						</view>
					</view>
					<view class="choose_plan bdcolor_girl" @click="getUserProfile(3)">
						<view class="left" style="background-color: #f6e2d8;">
							年计划：
						</view>
						<view class="right">
							<view class="">1688元/年</view>
							<view class="">一次性缴费一年</view>
						</view>
					</view>
			
				</view>
			</view>
			
			<!-- 选 女 公共 引导页  您已成功登录！！-->
			<view class="pages_1" v-if="girlnickNameStatus">
				<image @click="girlBackPlan" class="left_icon" src="../static/left.png" mode=""></image>
				<view class="banner">
					<image src="../static/pagesimg_4_girl.png" mode=""></image>
				</view>
				<view class="text weight" style="width: 77%;font-size: 32rpx;margin: 0 auto;margin-top: 40rpx;line-height: 1.5em;">
					<text style="background:#f0cebe;margin: 0 auto;color:#f0cebe;font-size: 18rpx;}">您已成功登录！11111111111111111</text>
					<view style="margin: 0 auto;margin: 0 auto;position: relative;top: -36rpx;left: 20rpx;">您已成功登录！</view>
				</view>
				<view class="box weight bdcolor_girl" style="font-size:32rpx;margin-top: 0px;">
					<text>照顾自己 </text>
					<text>就是关心自己的一切，有些时候你只需要一点点小惊喜！</text>
				</view>
				<view class="info_box bgcolor_girl">
					<view class="title">我们该怎么称呼您？</view>
					<view class="info_box_content">
						<image v-if="avatarUrl" :src="avatarUrl" mode=""></image>
						<view class="name_box bdcolor_girl">
							<view class="name bdcolor_girl">{{nickName}}</view>
						</view>
					</view>
				</view>
				<view class="btn bdcolor_girl" @click="girlFindClick">下一步</view>
			</view>
			
			<!-- 选 女 公共 引导页  您今天想要寻找什么？-->
			<view class="pages_1" v-if="girlFindStatus">
				<image @click="girlBackName" class="left_icon" src="../static/left.png" mode=""></image>
				<view class="banner">
					<image src="../static/pagesimg_4_girl.png" mode=""></image>
				</view>
				<view class="text" style="width: 77%;font-size: 40rpx;margin: 0 auto;margin-top: 36rpx;line-height: 1.5em;">
					<text style="background: #f0cebe;margin: 0 auto;color: #f0cebe;font-size: 18rpx;}">您已成功登录！11111111111111111111111111</text>
					<view class="weight" style="margin: 0 auto;margin: 0 auto;position: relative;top: -48rpx;left: 20rpx;">很高兴见到您，{{nickName}}！</view>
				</view>
				<view class="line bdcolor_girl"></view>
				<view class="box bdcolor_girl weight" style="font-size:30rpx;margin-top:30rpx;">
					<text style="font-weight: 600;">照顾自己 </text>
					<text>就是由内而外的寻找并保持您的最佳状态</text>
				</view>
				<view class="info_box bgcolor_girl" style="padding-bottom:40rpx;">
					<view class="title">您今天想要寻找什么？</view>
					<view class="info_box_content" style="justify-content: space-around;margin-top: 40rpx;">
						<view class="choose_item bdcolor_girl" @click="girlPayClick">
							<image style="width: 50rpx;height: 50rpx;border-radius: 0px;" src="../static/star_girl.png" mode=""></image>
							<view style="margin-top: 20rpx;">给我惊喜！</view>
						</view>
						<view class="choose_item bdcolor_girl" @click="girlPayClick">
							<image style="width: 50rpx;height: 50rpx;border-radius: 0px;" src="../static/heart_girl.png" mode=""></image>
							<view style="margin-top: 20rpx;">由我自己决定！</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 选 女 公共 引导页  选择您的付款方式？-->
			<view class="pages_1" v-if="girlPayStatus">
				<image @click="girlBackFind" class="left_icon" src="../static/left.png" mode=""></image>
				<view class="banner">
					<image style="height: 720rpx;" src="../static/pagesimg_4_girl.png" mode=""></image>
				</view>
				<view class="text" style="width: 77%;font-size: 40rpx;margin: 0 auto;margin-top: 50rpx;line-height: 1.5em;">
					<image style="height: 30rpx;width: 30rpx;vertical-align: -12rpx;" src="../static/star_fill_girl.png" mode=""></image>
					<text style="background:#f0cebe;margin: 0 auto;color:#f0cebe;font-size: 18rpx;margin-left: 20rpx;">您已成功登录！11111111111111111111111111111</text>
					<view class="weight"  style="font-size: 32rpx;margin: 0 auto;margin: 0 auto;position: relative;top: -48rpx;left: 20rpx;margin-left: 56rpx;">您的惊喜已准备好了！</view>
				</view>
				<view class="line bdcolor_girl"></view>
				<view class="info_box bgcolor_girl" style="padding-bottom:50rpx;">
					<view class="title">选择您的付款方式</view>
					<view class="info_box_content" style="justify-content: space-around;margin-top: 40rpx;">
						<view class="choose_item bdcolor_girl" @click="girlTransitClick">
							<image style="width: 60rpx;height: 60rpx;border-radius: 0px;" src="../static/wx_pay_girl.png" mode=""></image>
							<view style="margin-top: 20rpx;font-size: 26rpx;font-weight: 600;">微信支付</view>
						</view>
						<view class="choose_item bdcolor_girl" @click="girlTransitClick">
							<image style="width:60rpx;height: 50rpx;border-radius: 0px;" src="../static/card_pay_girl.png" mode=""></image>
							<view style="margin-top: 20rpx;font-size: 26rpx;font-weight: 600;">信用卡</view>
						</view>
					</view>
				</view>
			</view>
				
			<!-- 选 女 公共 引导页  选择您的运输方式？-->
			<view class="pages_1" v-if="girlTransitStatus">
				<image @click="girlBackPay" class="left_icon" src="../static/left.png" mode=""></image>
				<view class="banner">
					<image style="height: 720rpx;" src="../static/pagesimg_4_girl.png" mode=""></image>
				</view>
				<view class="text" style="width: 77%;font-size: 40rpx;margin: 0 auto;margin-top: 50rpx;line-height: 1.5em;">
					<image style="height: 30rpx;width: 30rpx;vertical-align: -12rpx;" src="../static/star_fill_girl.png" mode=""></image>
					<text style="background:#f0cebe;margin: 0 auto;color:#f0cebe;font-size: 18rpx;margin-left: 20rpx;">您已成功登录！11111111111111111111111111111</text>
					<view class="weight" style="font-size: 32rpx;margin: 0 auto;margin: 0 auto;position: relative;top: -48rpx;left: 20rpx;margin-left: 56rpx;">您已成功付款！</view>
				</view>
				<view class="line bdcolor_girl"></view>
				<view class="info_box bgcolor_girl" style="padding-bottom:50rpx;">
					<view class="title">选择您的运输方式</view>
					<view class="info_box_content" style="justify-content: space-around;margin-top: 40rpx;">
						<view class="choose_item bdcolor_girl" @click="girlEndClick">
							<image style="width: 50rpx;height: 60rpx;border-radius: 0px;" src="../static/location_girl.png" mode=""></image>
							<view style="margin-top: 20rpx;font-size: 26rpx;font-weight: 600;">自提点</view>
						</view>
						<view class="choose_item bdcolor_girl" @click="girlEndClick">
							<image style="width:50rpx;height: 50rpx;border-radius: 0px;" src="../static/home_girl.png" mode=""></image>
							<view style="margin-top: 20rpx;font-size: 26rpx;font-weight: 600;">送货</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 选 女 公共 引导页  探索更多！-->
			<view class="pages_1" v-if="girlEndStatus">
				<image @click="girlBackTransit" class="left_icon" src="../static/left.png" mode=""></image>
				<view class="banner">
					<image src="../static/pagesimg_4_girl.png" mode=""></image>
				</view>
				<view class="text" style="width: 77%;font-size: 40rpx;margin: 0 auto;margin-top: 50rpx;line-height: 1.5em;">
					<image style="height: 30rpx;width: 30rpx;vertical-align: -12rpx;" src="../static/star_fill_girl.png" mode=""></image>
					<text style="background:#f0cebe;margin: 0 auto;color:#f0cebe;font-size: 18rpx;margin-left: 20rpx;">您已成功登录！11111111111111111111111111111</text>
					<view class="weight" style="font-size: 32rpx;margin: 0 auto;margin: 0 auto;position: relative;top: -48rpx;left: 20rpx;margin-left: 56rpx;">谢谢您订阅<text style="border-bottom: 2rpx #000 solid;">tbn</text>， <text >{{nickName}}}！</text></view>
				</view>
				<view class="box bdcolor_girl weight" style="font-size: 32rpx;margin-top: 2rpx;">
					<text style="border-bottom: 2rpx #000 solid;">tbn </text>
					<text>女孩</text>
					<text>喜欢通过尝试新产品来善待自己，更想不断提升自我</text>
				</view>
				<view style="width: 80%;margin: 0 auto;margin-top: 60rpx;font-size: 28rpx;">
					<text>您可以在个人资料页面查看新的通知。同时我们很高兴您找到了您想要的东西!您能尝试这些有趣的产品也是我们的荣幸。</text>
				</view>
				<view class="btn bdcolor_girl" @click="goPay" style="margin-top: 60rpx;">探索更多！</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		getProductHot
	} from '@/api/store.js';
	export default {
		data() {
			return {
				// 获取用户信息
				userInfo: {},
				hasUserInfo: false,
				canIUseGetUserProfile: false,
				nickName:'',//获取的用户昵称
				avatarUrl:'',//获取的用户头像
				
				transitpage_1_status:true,//第一个过渡页面的显示状态
				transitpage_2_status:false,//第二个过渡页面的显示状态
				startStatus:false,//让我们开始吧 页面！默认隐藏
				changeSexStatus:false,//选择性别页面  默认隐藏 
				boyReadyStatus:false,//男孩第一页  默认隐藏
				boyPlanStatus:false,//男孩第二页  默认隐藏
				boynickNameStatus:false,//男孩第三页  您已成功登录 默认隐藏
				boyFindStatus:false,//男孩 您今天想要寻找什么  默认隐藏
				boyPayStatus:false,//男孩 选择您的付款方式？  默认隐藏
				boyTransitStatus:false,//男孩 选择您的运输方式？  默认隐藏
				boyEndStatus:false,//男孩 探索更多  默认隐藏
				
				girlReadyStatus:false,//女孩第一页  默认隐藏
				girlPlanStatus:false,//女孩第二页  默认隐藏
				girlnickNameStatus:false,//女孩第三页  您已成功登录 默认隐藏
				girlFindStatus:false,//女孩 您今天想要寻找什么  默认隐藏
				girlPayStatus:false,//女孩 选择您的付款方式？  默认隐藏
				girlTransitStatus:false,//女孩 选择您的运输方式？  默认隐藏
				girlEndStatus:false,//女孩 探索更多  默认隐藏
				
				// 需要提交的表单信息
				submitInfo:{
					sex:'',//选择的性别 男 2  女 3
					plan:'',//选择护理计划 月 1 半年 2 年 3
					find:'',//选择寻找什么 惊喜 1 自己决定 2
				}
			}
		},
		onShow() {
			this.get_host_product();
		},
		onLoad() {
			this.transitageShow();
			if (wx.getUserProfile) {
			      // this.setData({
			      //   canIUseGetUserProfile: true
			      // })
			    }
		},
		methods: {
			// 获取我的推荐  
			// 对应的 post 还是 get 需要在 对应的 @/api/store.js 中，进行定义
			get_host_product: function() {
				let that = this;
				getProductHot(
					that.hotPage,
					that.hotLimit,
				).then(res => {
					console.log('res',res);
				});
			},
			// 定时器设置过渡页面显示隐藏
			transitageShow(){
				var vm = this;
				setTimeout(function(){
					vm.transitpage_1_status = false;
					vm.transitpage_2_status = true;
				},2000);
				setTimeout(function(){
					vm.transitpage_2_status = false;
				},4000);
				this.startStatus = true;
			},
			//点击让我们开始吧,选择性别
			sexClick(){
				this.startStatus = false;
				this.changeSexStatus = true;
			},
			//点击选择男孩
			boyClick(e){
				this.submitInfo.sex = e;
				console.log('选择性别 2 男 3 女',this.submitInfo.sex);
				this.changeSexStatus = false;
				this.boyReadyStatus = true;
			},
			//点击 男 我已经准备好了 开始
			boyPlansClick(){
				this.boyReadyStatus = false;
				this.boyPlanStatus = true;
			},
			// 获取用户信息  2:男孩  3:女孩
			getUserProfile(e,p) {
			    wx.getUserProfile({
			      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
			      success: (res) => {
					  this.avatarUrl = res.userInfo.avatarUrl;
					  this.nickName = res.userInfo.nickName;
					  if(e == 2){
						  this.submitInfo.plan = p;
						  console.log('选择护理计划 1月 2半年 3年',this.submitInfo.plan);
						  this.boyPlanStatus = false;
						  this.boynickNameStatus = true;
					  }else{
						  this.submitInfo.plan = p;
						  console.log('选择护理计划 1月 2半年 3年',this.submitInfo.plan);
						  this.girlPlanStatus = false;
						  this.girlnickNameStatus = true;
					  }
					  
			        // this.setData({
			        //   userInfo: res.userInfo,
			        //   hasUserInfo: true
			        // })
			      },
				  fail:(res)=>{
					  console.log('用户拒绝授权',res);
					  //用户按了拒绝按钮
					        wx.showModal({
					          title: '警告',
					          content: '您点击了拒绝授权，将无法继续操作，请授权之后再操作!!!',
					          showCancel: false,
					          confirmText: '返回授权',
					          success: function(res) {
					            // 用户没有授权成功，不需要改变 isHide 的值
					            if (res.confirm) {
					             	 console.log('用户点击了“返回授权”');
					            }
					          }
					        });
				  }
			    })
			},
			//下一步 打开您今天想要寻找什么
			boyFindClick(){
			  	this.boynickNameStatus = false;
			  	this.boyFindStatus = true;
			},
			//下一步  选择您的付款方式
			boyPayClick(e){
				this.submitInfo.find = e;
				console.log('选择寻找什么 惊喜 1 自己决定 2 ',this.submitInfo.find);
				this.boyFindStatus = false;
				this.boyPayStatus = true;
			},
			//下一步  选择您的运输方式
			boyTransitClick(){
				this.boyPayStatus = false;
				this.boyTransitStatus = true;
			},
			//下一步  男孩 结束
			boyEndClick(){
				this.boyTransitStatus = false;
				this.boyEndStatus = true;
			},
			//下一步  男孩 返回上一页
			boyBackClick(){
				this.boyEndStatus = false;
				uni.navigateBack({
				});
			},
			
			//点击选择女孩
			girlClick(e){
				this.submitInfo.sex = e;
				console.log('选择性别 2 男 3 女',this.submitInfo.sex);
				this.changeSexStatus = false;
				this.girlReadyStatus = true;
			},
			//点击 女 我已经准备好了 开始
			girlPlansClick(){
				this.girlReadyStatus = false;
				this.girlPlanStatus = true;
			},
			//下一步 打开您今天想要寻找什么
			girlFindClick(){
			  	this.girlnickNameStatus = false;
			  	this.girlFindStatus = true;
			},
			//下一步  选择您的付款方式
			girlPayClick(){
				this.girlFindStatus = false;
				this.girlPayStatus = true;
			},
			//下一步  选择您的运输方式
			girlTransitClick(){
				this.girlPayStatus = false;
				this.girlTransitStatus = true;
			},
			//下一步  女孩 结束
			girlEndClick(){
				this.girlTransitStatus = false;
				this.girlEndStatus = true;
			},
			
			// 男孩页面返回上一步
			// 点击  选择性别页 返回上一步
			boyBackStart(){
				this.changeSexStatus = false;
				this.startStatus = true;
			},
			// 点击  选择男孩 返回上一步
			boyBackSex(){
				this.boyReadyStatus = false;
				this.changeSexStatus = true;
			},
			// 点击 男 我已经准备好了 返回上一步
			boyBackReady(){
				this.boyPlanStatus = false;
				this.boyReadyStatus = true;
			},
			// 点击 男 你已成功登录 返回上一步
			boyBackPlan(){
				this.boynickNameStatus = false;
				this.boyPlanStatus = true;
			},
			// 点击 男 您今天想要寻找什么 返回上一步
			boyBackName(){
				this.boyFindStatus = false;
				this.boynickNameStatus = true;
			},
			// 点击 男 选择您的付款方式 返回上一步
			boyBackFind(){
				this.boyPayStatus = false;
				this.boyFindStatus = true;
			},
			// 点击 男 选择您的运输方式 返回上一步
			boyBackPay(){
				this.boyTransitStatus = false;
				this.boyPayStatus = true;
			},
			// 点击 男  男孩 结束 返回上一步
			boyBackTransit(){
				this.boyEndStatus = false;
				this.boyTransitStatus = true;
			},
			
			
			// 女孩页面返回上一步
			// 点击  选择女孩 返回上一步
			girlBackSex(){
				this.girlReadyStatus = false;
				this.changeSexStatus = true;
			},
			// 点击 女 我已经准备好了 返回上一步
			girlBackReady(){
				this.girlPlanStatus = false;
				this.girlReadyStatus = true;
			},
			// 点击 女 你已成功登录 返回上一步
			girlBackPlan(){
				this.girlnickNameStatus = false;
				this.girlPlanStatus = true;
			},
			//下一步  女孩 返回上一页
			girlBackClick(){
				this.girlEndStatus = false;
				uni.navigateBack({
				});
			},
			// 点击 女 您今天想要寻找什么 返回上一步
			girlBackName(){
				this.girlFindStatus = false;
				this.girlnickNameStatus = true;
			},
			// 点击 女 选择您的付款方式 返回上一步
			girlBackFind(){
				this.girlPayStatus = false;
				this.girlFindStatus = true;
			},
			// 点击 女 选择您的运输方式 返回上一步
			girlBackPay(){
				this.girlTransitStatus = false;
				this.girlPayStatus = true;
			},
			// 点击 女  女孩 结束 返回上一步
			girlBackTransit(){
				this.girlEndStatus = false;
				this.girlTransitStatus = true;
			},
			
			
			//选择部分的逻辑
			
			//性别选择页
			selectSex(){
				
			}
		}
	}
</script>

<style>
	/* 过渡页 */
	.transitpage_1,.transitpage_2{
		height: 100vh;
		width: 100%;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.transitpage_1 image{
		display: inline-block;
		width: 400rpx;
		height: 90rpx;
		z-index: 5;
	}
	.transitpage_2 image{
		display: inline-block;
		width: 300rpx;
		height: 300rpx;
		z-index: 4;
	}
	
	/* 公共 引导页 让我们开始吧！ */
	.content{
		color: #000000 !important;
		letter-spacing: 2rpx !important;
		font-size: 32rpx !important;
		background-color: #FFFFFF !important;
		height: 100vh;
	}
	.pages_1 .banner image{
		width: 100%;
		height: 540rpx;
	}
	.title{
		font-size: 36rpx;
		width: 70%;
		text-align: left;
		margin: 0 auto;
		margin-top: 20rpx;
		border-bottom: 2rpx #7dcee2 solid;
		padding: 20rpx 0px;
		
	}
	.box{
		width: 80%;
		margin: 0 auto;
		border: 6rpx solid #7dcee2;
		border-radius: 14rpx;
		margin-top: 40rpx;
		font-size: 26rpx;
		/* font-style: italic; */
		padding: 30rpx;
	}
	.text{
		/* font-style: italic; */
		margin-top: 40rpx;
		font-size: 32rpx;
	}
	.btn{
		width: 50%;
		border: 6rpx solid #7dcee2;
		padding: 14rpx 20rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		text-align: center;
		border-radius: 200rpx;
		/* font-style: italic; */
		font-size: 30rpx;
		letter-spacing: 6rpx;
	}
	
	/* 公共 性别选择页 */
	.sex_box{
		width: 80%;
		margin: 0 auto;
		background-color: #e5f5f9;
		border-radius: 20rpx;
		margin-top: 40rpx;
		font-size: 26rpx;
		/* font-style: italic; */
		/* font-weight: 700; */
		text-align: center;
	}
	.sex_box_title {
	    font-size: 34rpx;
		border-bottom: 6rpx solid #fff;
		padding: 30rpx 0px;
		font-weight: 700;
	}
	.sex_box .choose{
		display: flex;
		justify-content: space-around;
		padding: 50rpx 20rpx;
	}
	.sex_box .girl,.sex_box .boy{
		width: 200rpx;
		height: 260rpx;
		background: #fff;
		border: 6rpx #7dcee2 solid;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.sex_box .girl image,.sex_box .boy image{
		width: 150rpx;
		height: 150rpx;
	}
	
	/* 选择您的自我护理计划 */
	.choose_plan{
		width: 87%;
		background: #fff;
		display: flex;
		align-items: center;
		margin: 0 auto;
		border-radius: 14rpx;
		border: 6rpx #7dcee2 solid;
		padding:30rpx 20rpx;
		margin-bottom: 16rpx;
		margin-top: 16rpx;
	}
	.choose_plan .left{
		width: 190rpx;
		background: #d8ecf6;
		height: 36rpx;
		text-align: center;
		font-weight: 700;
	}
	.choose_plan .right{
		margin-left: 30rpx;
	}
	
	/* 我们该怎么称呼您?  box样式 */
	.info_box{
		width: 80%;
		background: #e5f2f9;
		border-radius: 24rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		padding: 10rpx 0px;
	}
	.info_box .title{
		padding: 10rpx 0 30rpx 0;
		/* font-style: italic; */
		font-size: 30rpx;
		border-bottom: 6rpx #fff solid;
		/* text-indent: 2em; */
		width: 100%;
		text-align: center;
		font-weight: 700;
	}
	.info_box_content{
		width: 100%;
		margin: 0 auto;
		display: flex;
		height: 200rpx;
		justify-content: center;
		align-items: center;
		padding: 50rpx 0px;
	}
	.info_box_content image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 200rpx;
	}
	.info_box .name_box{
		border: 6rpx solid #7dbee2;
		border-radius: 14rpx;
		/* font-style: italic; */
		height: 84rpx;
		padding: 0px 16rpx;
		background: #fff;
		font-weight: 700;
		margin-left: 30rpx;
	}
	.info_box .name_box .name{
		padding: 10rpx 72rpx;
		border-bottom: 2rpx #7dbee2 solid;
	}
	.choose_item{
		border: 6rpx solid #7dbee2;
		background: #fff;
		border-radius: 14rpx;
		padding: 36rpx 4rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		width: 190rpx;
		font-size: 20rpx;
		font-weight: 600;
		height: 210rpx;
		align-items: center;
		justify-content: center;
	}
	
	/* 线条样式 */
	.line{
		width: 80%;
		height: 20rpx;
		border-bottom: 2rpx #7dbee2 solid;
		border-top: 2rpx #7dbee2 solid;
		margin: 0 auto;
		margin-top: -30rpx;
	}
	
	/* 女孩主题色 */
	/* 背景色 */
	.bgcolor_girl{
		background-color: #f9ebe5;
	}
	/* 边框色 */
	.bdcolor_girl{
		border-color: #e29d7d !important;
	}
	/* 选择色 */
	.active_girl{
		background-color: #edc4b1;
	}
	
	/* 返回箭头 */
	.left_icon{
		width: 45rpx;
		height: 40rpx;
		position: fixed;
		left: 30rpx;
		top: 30rpx;
	}
	/* 加粗 */
	.weight{
		font-weight: 700;
	}
</style>
